/**
 * Input组件
 * @class Input
 * @extends Basic
 *
 *
 * @param {function} onFocus 获取焦点时触发
 * @param {function} onKeyUp keyup时触发
 * @param {function} onBlur 失去焦点时触发
 *
 * 示例:
 *
 *     @example
 *     <Input placeholder="default" id="name" ref="ddd" value="333" onChange={this.onchange}/>
 *
 *
 */
var Input = React.createClass({
    getDefaultProps: function () {
        return {
            className: 'ucs-input',
            dmbind: '',
            placeholder: "",
            onFocus: function () {
            },
            onBlur: function () {
            }
        };
    },
    componentDidMount: function () {
    },
    _onKeyUp:function (e) {
          this.props.onKeyUp && this.props.onKeyUp(e);
    },
    _onFocus: function (e) {
        var _nodeInput = e.target || e.srcElement,
            _nodeSpan = _nodeInput.nextSibling;
        if (_nodeSpan.className == "ucs-placeholder") {
            _nodeSpan.className = "ucs-placeholder hide";
        }
        this.props.onFocus && this.props.onFocus();
    },
    _handle: function (e) {
        var _nodeSpan = e.target || e.srcElement,
            _node = _nodeSpan.parentNode,
            _nodeInput = _node.firstChild;
        if (_nodeSpan.className == "ucs-placeholder") {
            _nodeSpan.className = "ucs-placeholder hide";
        }
        _nodeInput.focus();
    },
    _placeholder: function (_this) {
        if (!('placeholder' in document.createElement('input'))) {
            return (
                <span className="ucs-placeholder" onClick={_this._handle}>{_this.props.value ? _this.props.value : _this.props.placeholder}</span>
            );
        } else {
            return "";
        }
    },
    _onBlur: function (e) {
        if (!('placeholder' in document.createElement('input'))) {
            var _nodeInput = e.target || e.srcElement,
                _node = _nodeInput.parentNode,
                _nodeSpan = _node.lastChild;
            if (!_nodeInput.value) {
                _nodeSpan.className = "ucs-placeholder";
                _nodeSpan.innerHTML = this.props.placeholder;
            }
        }
        this.props.onBlur && this.props.onBlur();
    },
    focus:function () {
        this.refs.input.focus();

    },
    render: function () {
        var that = this;
        var GiraffeObjectManager = window.GiraffObjectManager;
        if(this.props.dmbind){
            var MaxLength = GiraffeObjectManager[this.props.dmbind].maxLength;
            GiraffeObjectManager[this.props.dmbind].focus = function () {
                document.getElementById(that.props.dmbind).focus();  //todo:这是一个比较麻烦的问题，后续再优化，暂时先这样把
            }
        }
        if (MaxLength == undefined) {
            return (
                <div className="ucs-input-control">
                    <input ref="input"
                           type="text"
                           id={this.props.dmbind}
                           value={this.props.value ? this.props.value : ''}
                           className={this.props.className}
                           dmbind={this.props.dmbind}
                           placeholder={this.props.placeholder}
                           onkeyup={this._onKeyUp.bind(this)}
                           onfocus={this._onFocus.bind(this)}
                           onblur={this._onBlur.bind(this)}/>
                    {this._placeholder(this)}
                </div>
            )

        } else {
            return (
                <div className="ucs-input-control">
                    <input ref="input"
                           maxLength={MaxLength}
                           type="text"
                           id={this.props.dmbind}
                           value={this.props.value ? this.props.value : ''}
                           className={this.props.className}
                           dmbind={this.props.dmbind}
                           placeholder={this.props.placeholder}
                           onkeyup={this._onKeyUp.bind(this)}
                           onfocus={this._onFocus.bind(this)}
                           onblur={this._onBlur.bind(this)}/>
                    {this._placeholder(this)}
                </div>
            )

        }

    }
})
module.exports = Input;